import React, { Component } from 'react'
import './css/tabBar.less'
import api from '@MODULES/common/api'
import { Link, withRouter } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import config from '@UTILS/config'
import store from 'store'
class TabBarCom extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: props.content,
            shopCartNum: 0
        }
    }
    componentDidMount() {
    }
    render() {
        const iconArr = [
            {
                default: require('./img/tabBar/home_uncheck_icon@2x.png'),
                act: require('./img/tabBar/home_selected_icon@2x.png'),
                title: '首页',
                key: 'index',
                to: '/'
            },
            {
                default: require('./img/tabBar/results_uncheck_icon@2x.png'),
                act: require('./img/tabBar/results_selected_icon@2x.png'),
                title: '业绩',
                key: 'performance',
                to: '/performance'
            },
            {
                default: require('./img/tabBar/ranking_uncheck_icon@2x.png'),
                act: require('./img/tabBar/ranking_selected_icon@2x.png'),
                title: '排行',
                key: 'ranking',
                to: '/ranking'
            },
            {
                default: require('./img/tabBar/financial_uncheck_icon@2x.png'),
                act: require('./img/tabBar/financial_selected_icon@2x.png'),
                title: '财务',
                key: 'financial',
                to: '/financial'
            },
            {
                default: require('./img/tabBar/management_uncheck_icon@2x.png'),
                act: require('./img/tabBar/management_selected_icon@2x.png'),
                title: '目标管理',
                key: 'management',
                to: '/management'
            },
        ]
        return (
            <div>
                <div style={{
                    height: '50px'
                }}></div>
                <div className="bottomNavTabBar">
                    <TabBar
                        unselectedTintColor="#666666"
                        tintColor={config.theme['color-text-theme']}
                        barTintColor="white"
                        hidden={this.state.hidden}
                    >
                        {
                            iconArr.map((item, index) => {
                                return <TabBar.Item
                                    icon={{ uri: item.default }}
                                    selectedIcon={{ uri: item.act }}
                                    badge={item.title === '购物车' ? this.state.shopCartNum : ''}
                                    title={item.title}
                                    key={item.key}
                                    selected={this.state.selectedTab === item.key}
                                    onPress={() => {
                                        this
                                            .props
                                            .history
                                            .push(item.to)
                                    }}
                                >
                                </TabBar.Item>
                            })
                        }

                    </TabBar>
                </div>
            </div>
        )
    }
}
export default withRouter(TabBarCom)